<!DOCTYPE html>
<html>

<head>
    <title>随机点名</title>
    <style>
        body {
          font-family: Arial, sans-serif;
          background-color: #f5f5f5;
        }

        h1 {
          color: #333;
          text-align: center;
          margin-top: 50px;
        }

        #names {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 50px;
        }

     .name {
          display: inline-block;
          padding: 10px 20px;
          margin: 10px;
          background-color: #fff;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

     .name:hover {
          background-color: #eaeaea;
        }

     .highlight {
          background-color: #ff6600;
          color: #fff;
          border-color: #ff6600;
        }

     .blinking {
          animation: blink 0.5s 3;
        }

        @keyframes blink {
          0% {
            opacity: 1;
          }

          50% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        button {
          display: block;
          margin: 50px auto;
          padding: 10px 20px;
          background-color: #4CAF50;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        button:hover {
          background-color: #45a049;
        }
    </style>
</head>

<body>
<h1>随机点名</h1>
<button onclick="randomName()">点名</button>
<div id="names"></div>

<script>
    var names = ["陈福星", "李幸", "杨康", "李捍宇", "蔡云州", "刘宇", "肖志强", "苏泫华", "冷望鑫", "张思龙", "符开鼎", "肖威", "秦杰", "黄柏林", "邓明宝", "陈淦", "杨浪", "王华超", "胡文恺", "周富荣", "周炽桥", "潘赟", "李聪", "车敏聪", "杨林", "曾海成", "李品良", "陆一铭", "黄克举", "邹阳", "李天畅", "杜亚平", "王衡", "张菁", "陈智勇", "庞安南", "赖浩", "谭俊波", "陈强", "张文建", "朱雯强", "崔思洁", "张琦", "陈春燕", "黄政淮", "颜全灏", "彭子昌", "董畅", "曾金龙", "曾航", "杨尚辉", "韦云", "骆彪", "廖茂增", "吴玉东", "郑浩霖", "陈新洪", "姚进全", "吴升辉", "何林泽", "甘泽峰", "熊梦捷", "汪海坤", "梁道伟", "王炅", "郑烨", "何鸿杰", "莫汉立", "苏志强", "李伟", "何东波", "冯朵", "漆耘庄", "华雪健", "王佳斌", "罗胜波", "曾镇伟", "刘志", "蒙裕钧"];

    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    function randomName() {
      shuffleArray(names);

      // 清除之前的高亮
      var allNames = document.getElementsByClassName('name');
      for (var i = 0; i < allNames.length; i++) {
        allNames[i].classList.remove('highlight');
      }

      // 随机选中一个名字并添加闪烁效果
      var randomIndex = Math.floor(Math.random() * names.length);
      var randomName = names[randomIndex];
      var selectedName = document.getElementById(randomName);
      if (selectedName) {
        selectedName.classList.add('blinking');
      }

      // 闪烁结束后高亮显示名字
      setTimeout(function() {
        if (selectedName) {
          selectedName.classList.remove('blinking');
          selectedName.classList.add('highlight');
        }
      }, 1500);
    }

    // 初始时列出所有名字
    for (var i = 0; i < names.length; i++) {
      var name = names[i];
      var div = document.createElement('div');
      div.id = name;
      div.classList.add('name');
      div.innerHTML = name;
      document.getElementById('names').appendChild(div);
    }
</script>
</body>

</html>